# Typed CSS Modules Plugin

import { SourceCode } from 'rspress/theme';

<SourceCode href="https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-typed-css-modules" />

The Typed CSS Modules plugin provides the ability to generate TypeScript declaration files for CSS Modules in the project.

## Quick Start

### Install Plugin

You can install the plugin using the following command:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @rsbuild/plugin-typed-css-modules -D" />

### Register Plugin

You can register the plugin in the `rsbuild.config.ts` file:

```ts title="rsbuild.config.ts"
import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';

export default {
  plugins: [pluginTypedCSSModules()],
};
```

## Example

By adding the Typed CSS Modules plugin, Rsbuild will generate TypeScript declaration files for all CSS Modules in the project.

For example, create two files named `src/index.ts` and `src/index.module.css`:

```tsx title="src/index.ts"
import styles from './index.module.css';

console.log(styles.pageHeader);
```

```css title="src/index.module.css"
.page-header {
  color: black;
}
```

After building, Rsbuild will generate a `src/index.module.css.d.ts` type declaration file:

```ts title="src/index.module.css.d.ts"
interface CssExports {
  'page-header': string;
  pageHeader: string;
}
declare const cssExports: CssExports;
export default cssExports;
```

Now when you open the `src/index.ts` file, you can see that the `styles` object already has an accurate type.

## Named Export

If [output.cssModules.namedExport](/config/output/css-modules#cssmodulesnamedexport) is enabled, the generated type declaration file will only include named exports.

For example:

```css title="index.module.css"
.page {
  color: black;
}
.header {
  color: white;
}
```

The generated types would be:

```ts title="src/index.module.css.d.ts"
export const page: string;
export const header: string;
```

## Configure Git

In the above example, `src/index.module.css.d.ts` is generated by compilation, you can choose to commit them to the Git repository, or you can choose to ignore them in the `.gitignore` file:

```bash
# Ignore auto generated CSS declarations
*.module.css.d.ts
*.module.sass.d.ts
*.module.scss.d.ts
*.module.less.d.ts
*.module.styl.d.ts
*.module.stylus.d.ts
```

In addition, if the generated code causes ESLint to report errors, you can also add the above configuration to the `.eslintignore` file.
